import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import logo from "assets/images/logo.png";
import menu from "assets/images/menu.png";
import s from "./index.scss";
import { isDrawer } from "actions/common";
import { connect } from "react-redux";
import { isOverflow } from "app/utils";
import Footer from "components/Footer";
import { hashHistory, router } from "React-router";

@connect(
  state => ({
    common: state.common
  }),
  {
    isDrawer
  }
)
export default class extends PureComponent {
  static contextTypes = {
    router: PropTypes.object.isRequired
  };
  constructor(props) {
    super(props);
    this.state = {
      open: true
    };
    this.onSwitch = this.onSwitch.bind(this);
  }
  componentDidMount() {
    // console.log(this.props,'header')
  }
  onLeftClick = () => {
    const { router } = this.context;
    const { leftClick } = this.props;
    if (leftClick) {
      return leftClick();
    }
    if (history.state) {
      return history.back();
    }
    router.push({
      pathname: ""
    });
  };

  onSwitch = flag => {
    let that = this;
    let { isDrawer } = this.props;
    let { isHide } = this.props.common;

    //console.log(isHide);
    isDrawer(!isHide);
    isOverflow(!isHide);
  };
  onLink = url => {
    let { isDrawer } = this.props;
    let { isHide } = this.props.common;
    isDrawer(false);
    isOverflow(false);
    hashHistory.replace(url);
  };
  render() {
    let { right, children, flag, className, color, title } = this.props;
    
    return (
      <div>
        <div className={`${s.headerBoxBlock}`} />
        <div
          className={`flex-wrp flex-align-between    ${
            s.headerBox
          } ${className || "bg-white"} ${color || "color3"}`}
        >
          <div className=" flex-wrp flex-item flex-align-center ">
            <img
              src={logo}
              className={`${s.logo}`}
              onClick={this.onLink.bind(this, "/")}
            />
          </div>
          {children}
          {!children && (
            <div
              className={`flex-wrp flex-center  nowrap  ${color ||
                "color16"}`}
            >
              {title}
            </div>
          )}
          <div className={`flex-wrp flex-item flex-bottom ${s.headRight}`}>
           {right!=undefined?right:<img
              src={menu}
              className={`${s.menuImg}`}
              onClick={this.onSwitch}
            />}
          </div>
        </div>
      </div>
    );
  }
}
